<template>
    <ContentWrap>
        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px" @submit.native.prevent>
            <el-form-item label="参数键名" prop="key">
                <el-input v-model="queryParams.key" placeholder="请输入参数键名" clearable @keyup.enter="handleQuery" class="!w-240px"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="handleQuery">
                    <Icon icon="ep:search" class="mr-5px"/>
                    搜索
                </el-button>
                <el-button @click="resetQuery">
                    <Icon icon="ep:refresh" class="mr-5px"/>
                    重置
                </el-button>
            </el-form-item>
        </el-form>
    </ContentWrap>

    <ContentWrap>
        <el-table v-loading="loading" :data="list">
            <el-table-column type="index" align="center" width="50"/>
            <el-table-column label="参数名称" prop="name" width="220" show-overflow-tooltip/>
            <el-table-column label="参数键值" prop="value" min-width="300" show-overflow-tooltip/>
            <el-table-column label="备注" prop="remark" min-width="200" show-overflow-tooltip/>
            <el-table-column label="操作" align="center" width="100" fixed="right">
                <template #default="scope">
                    <el-button link type="primary" @click="openForm(scope.row.id)">
                        编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </ContentWrap>

    <!-- 表单弹窗：添加/修改 -->
    <ConfigForm ref="formRef" @success="getList"/>
</template>

<script lang="ts" setup>
import {useConfigApi} from "@/api/yxt/config";
import ConfigForm from "@/views/yxt/room/ConfigForm.vue";

defineOptions({name: 'YxtRoomConfig'})

const configApi = useConfigApi();

const loading = ref<boolean>(true)      // 列表的加载中
const list = ref<Array<any>>([])        // 列表的数据
const queryParams = reactive({
    key: "",
    kinds: ["room", "order"]
})

// 列表
const getList = async () => {
    loading.value = true
    try {
        list.value = await configApi.getList(queryParams);
    } finally {
        loading.value = false
    }
}

const queryFormRef = ref() // 搜索的表单
// 搜索
const handleQuery = () => {
    getList()
}

// 重置
const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
}


// 更新
const formRef = ref()
const openForm = (id: number) => {
    formRef.value.open(id)
}

// 加载
onMounted(() => {
    getList()
})
</script>
